<template>
  <el-tree
    v-loading="loading"
    :data="data"
    @node-click="handleNodeClick"
  >
  </el-tree>
</template>

<script>
/**
 * @typedef {{
 *   'children': Data[],
 *   'label': String,
 *   'value': String,
 * }} Data
 */
/**
 * # 博思树
 * 用于构建树形组件
 *
 * 使用该组件时，可以通过点击树形结构的叶子节点，获取节点对应的路径信息和值
 *
 * 一般用于单个参数的信息查询
 */
export default {
  'name': 'BosssoftTree',

  'props': {
    /**
     * `博思树`的树形数据
     * @type {Data[]}
     */
    'data': {
      'default' () {
        return []
      },
      'type': Array,
    },
    /**
     * 设置`博思树`的树是否为加载状态
     */
    'loading': {
      'default': false,
      'type': Boolean,
    },
  },

  'methods': {
    /**
     * 处理树节点的点击事件
     * @typedef {{
     *   'data': Data,
     *   'isLeaf': Boolean,
     *   'parent': TreeNode,
     * }} TreeNode
     * @param {Data} data 树节点包含的数据
     * @param {TreeNode} treeNode 树节点在数据结构方面的属性对象
     */
    'handleNodeClick' (data, treeNode) {
      if (!treeNode.isLeaf) {
        return
      }
      /**
       * 通过树节点在数据结构方面的属性对象获取节点的路径
       * @param {TreeNode} node 树节点在数据结构方面的属性对象
       * @param {String[]} path 一个树节点的路径，使用字符串组成的数组表示
       * @return {String[]} 节点路径
       */
      const getNodePath = (node, path = []) => {
        return node.data.label
          ? [
            ...getNodePath(node.parent, path),
            node.data.label,
          ]
          : []
      }
      this.$emit('leaf-click', getNodePath(treeNode), data.value)
    },
  },
}
</script>

<style scoped lang="scss">

</style>
